import echarts from 'echarts'

const tooltip = {
  trigger: 'axis',
  backgroundColor: 'rgba(69, 14, 255,0.5)',
  borderWidth: '0',
  textStyle: {
    color: '#6DFFFF'
  },
  lineStyle: {
    width: 2,
    type: 'dashed' // 设置虚线类型
  },
  axisPointer: {
    type: 'shadow'
  }
}

/**
 * 平均良率
 */
export const yields = {
  color: ['#eed2f6', '#d0a4dd', '#944da9', '#b03bd3', '#900ab8'],
  title: {
    show: false,
    text: 'Gradient Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    show: false,
    data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
  },
  toolbox: {
    show: false,
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    backgroundColor: 'transparent',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      show: false,
      boundaryGap: false,
      data: [
        'Mon',
        'Tue',
        'Tue',
        'Wed',
        'Thu',
        'Fri',
        'Sat',
        'Sat',
        'Sat',
        'Sun'
      ]
    }
  ],
  yAxis: [
    {
      type: 'value',
      show: false
    }
  ],
  series: [
    {
      name: 'Line 1',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8
        // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //   {
        //     offset: 0,
        //     color: 'rgb(252, 128, 255)'
        //   },
        //   {
        //     offset: 1,
        //     color: 'rgb(202, 191, 236)'
        //   }
        // ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [40, 90, 152, 91, 134, 102, 240, 60, 0, 90]
    }
  ]
}

// /**
//  * UDP
//  */
// export const UDP = {
//   color: ['#eed2f6', '#d0a4dd', '#944da9', '#b03bd3', '#900ab8'],
//   title: {
//     show: false,
//     text: 'Gradient Stacked Area Chart'
//   },
//   tooltip: {
//     show: false,
//     trigger: 'axis',
//     axisPointer: {
//       type: 'cross',
//       label: {
//         backgroundColor: '#6a7985'
//       }
//     }
//   },
//   legend: {
//     show: false,
//     data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
//   },
//   toolbox: {
//     show: false,
//     feature: {
//       saveAsImage: {}
//     }
//   },
//   grid: {
//     left: '3%',
//     right: '4%',
//     bottom: '3%',
//     containLabel: true
//   },
//   yAxis: {
//     splitArea: {
//       show: false,
//       color: '#ccc'
//       // 其他 splitArea 配置项
//     }
//   },
//   xAxis:
//   [
//     {
//       type: 'category',
//       show: false,
//       boundaryGap: false,
//       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Fri']
//     }
//   ],
//   series: [
//     {
//       name: 'Line 1',
//       type: 'line',
//       stack: 'Total',
//       smooth: true,
//       lineStyle: {
//         width: 0
//       },
//       showSymbol: false,
//       areaStyle: {
//         opacity: 0.8
//         // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
//         //   {
//         //     offset: 0,
//         //     color: 'rgb(98, 163, 229)'
//         //   },
//         //   {
//         //     offset: 1,
//         //     color: 'rgb(191, 221, 252)'
//         //   }
//         // ])
//       },
//       emphasis: {
//         focus: 'series'
//       },
//       data: [90, 60, 134, 74, 50, 70]
//     }
//   ]
// }

/**
 * alreadyTest  已测汇总
 */
export const alreadyTest = (mychart) => {
  return {
    title: {
      text: '已测汇总',
      left: '10px',
      top: '10px',
      textStyle: {
        color: '#6C6C6C',
        fontSize: 20,
        fontWeight: 600,
        align: 'left'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    loading: {
      show: true,
      text: '数据加载中...', // 加载提示文本
      color: '#ff0000', // 加载动画颜色
      textStyle: {
        color: '#00ff00' // 文本颜色
      }
    },
    graphic: [
      {
        // 环形图中间添加文字
        type: 'text', // 通过不同top值可以设置上下显示
        // left: 'center',
        left: '42%',
        // right: '41%',
        // width: '100%',
        top: 'center',
        style: {
          text: ``,
          align: 'center',
          textAlign: 'center',
          fill: 'blcak', // 文字的颜色
          fontSize: 20,
          lineHeight: 20,
          width: 100,
          height: 30
        }
      }
    ],
    series: [
      // {
      //   name: '产线',
      //   type: 'pie',
      //   radius: ['40%', '50%'],
      //   itemStyle: {
      //     normal: {
      //       color: function(params) {
      //         // 自定义颜色数组
      //         var colorList = [
      //           '#5470C6', '#91CC75', '#EE6666', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
      //           '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
      //         ]
      //         return colorList[params.dataIndex % colorList.length]
      //       }
      //     }
      //   },
      //   label: {
      //     show: false
      //   },
      //   labelLine: {
      //     show: false
      //   },
      //   data: [
      //     { value: 1100, name: 'V-Test-SH' },
      //     { value: 2300, name: 'V-Test-WX' },
      //     { value: 4000, name: 'JCET-JY' },
      //     { value: 1000, name: 'JCET-JYR' },
      //     { value: 2000, name: 'SH' }
      //   ]
      // },
      {
        name: '工厂',
        type: 'pie',
        radius: ['40%', '60%'],
        center: ['45%', '50%'],
        itemStyle: {
          normal: {
            color: function(params) {
              // 自定义颜色数组
              var colorList = [
                '#3BA272', '#FC8452', '#9A60B4', '#5470C6', '#91CC75',
                '#FAC858', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                '#D7504B', '#F4E001', '#F0805A', '#26C0C0'
              ]
              return colorList[params.dataIndex % colorList.length]
            }
          }
        },
        // labelLine: {
        //   length: 30
        // },
        // label: {
        //   formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
        //   backgroundColor: '#F6F8FC',
        //   borderColor: '#8C8D8E',
        //   borderWidth: 1,
        //   borderRadius: 4,
        //   rich: {
        //     a: {
        //       color: '#6E7079',
        //       lineHeight: 22,
        //       align: 'center'
        //     },
        //     hr: {
        //       borderColor: '#8C8D8E',
        //       width: '100%',
        //       borderWidth: 1,
        //       height: 0
        //     },
        //     b: {
        //       color: '#4C5058',
        //       fontSize: 14,
        //       fontWeight: 'bold',
        //       lineHeight: 33
        //     },
        //     per: {
        //       color: '#fff',
        //       backgroundColor: '#4C5058',
        //       padding: [3, 4],
        //       borderRadius: 4
        //     }
        //   }
        // },
        labelLine: {
          length: 10,
          length2: 410,
          maxSurfaceAngle: 420
        },
        label: {
          alignTo: 'edge',
          formatter: '{name|{b}:{d}%}\n{time|{c}}',
          minMargin: 5,
          edgeDistance: 150,
          lineHeight: 15,
          rich: {
            time: {
              fontSize: 10,
              color: '#999'
            }
          }
        },
        // labelLayout: function(params) {
        //   console.log(params)
        //   const isLeft = params.labelRect.x < mychart.getWidth() / 3
        //   console.log(isLeft)
        //   const points = params.labelLinePoints
        //   // Update the end point.
        //   points[2][0] = isLeft
        //     ? params.labelRect.x
        //     : params.labelRect.x + params.labelRect.width
        //   return {
        //     labelLinePoints: points
        //   }
        // },
        data: [
          // { value: 3400, name: 'V-Test' },
          // { value: 5000, name: 'JCET' },
          // { value: 2000, name: 'TF-AMD' }
        ]
      }
    ]
  }
}

/**
 * 已测待测
 */
export const testing = {
  title: {
    text: '已测待测情况图',
    left: '10px',
    top: '10px',
    textStyle: {
      color: '#6C6C6C',
      fontSize: 20,
      fontWeight: 600,
      align: 'left'
    }
  },
  color: [
    '#5087EC',
    '#ccc'
  ],
  tooltip,
  legend: {
    show: true,
    bottom: '3%',
    data: ['已测', '待测']
  },
  grid: {
    top: 80, // 生成的图片和顶部的间距
    bottom: 40,
    left: 60,
    right: 60,
    containLabel: true// 为ture才会生效
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value}',
      lineStyle: {
        color: '#090909'
      }
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: '#090909'
      }
    },
    splitArea: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#ccc',
        type: 'dashed'
      }
    }
  },
  xAxis: {
    type: 'category',
    data: [],
    axisLabel: {
      formatter: '{value}',
      lineStyle: {
        color: 'black'
      }
    },
    axisLine: {
      lineStyle: {
        color: '#090909'
      }
    }
  },
  series: [
    {
      name: '已测',
      type: 'bar',
      stack: 'total',
      barWidth: '60%',
      lineStyle: {
        width: 2,
        type: 'dashed'
      },
      label: {
        show: true
        // formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
      },
      data: []
    },
    {
      name: '待测',
      type: 'bar',
      stack: 'total',
      barWidth: '60%',
      lineStyle: {
        width: 2,
        type: 'dashed' // 设置虚线类型
      },
      label: {
        show: true
        // formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
      },
      data: []
    }
  ]
}

/**
 * OEE
 */
export const OEE = {
  backgroundColor: 'transparent',
  title: {
    text: 'OEE',
    left: 'center',
    top: '10px',
    textStyle: {
      color: '#6C6C6C',
      fontSize: 20,
      fontWeight: 600,
      align: 'center'
    }
  },
  color: [
    '#5087EC',
    '#61a0a8',
    '#d48265',
    '#91c7ae',
    '#749f83',
    '#ca8622',
    '#bda29a',
    '#6e7074',
    '#546570',
    '#c4ccd3'
  ],
  tooltip,
  grid: {
    backgroundColor: 'transparent',
    top: 60, // 生成的图片和顶部的间距
    bottom: 40,
    left: 60,
    right: 60,
    containLabel: true// 为ture才会生效
  },
  legend: {
    show: true,
    bottom: '3%'
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisPointer: {
        type: 'shadow'
      },
      axisLabel: {
        formatter: '{value}',
        lineStyle: {
          color: 'black'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#090909'
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      splitArea: {
        show: false
      },
      axisLabel: {
        formatter: '{value} %',
        lineStyle: {
          color: 'black'
        }
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#090909'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#ccc',
          type: 'dashed'
        }
      }
    }
    // {
    //   type: 'value',
    //   // name: 'Temperature',
    //   min: 0,
    //   max: 25,
    //   interval: 5,
    //   splitArea: {
    //     show: false
    //   },
    //   axisLabel: {
    //     formatter: '{value} %',
    //     lineStyle: {
    //       color: 'black'
    //     }
    //   },
    //   axisLine: {
    //     show: false,
    //     lineStyle: {
    //       color: '#090909'
    //     }
    //   },
    //   splitLine: {
    //     show: true,
    //     lineStyle: {
    //       color: '#ccc', // 网格线颜色
    //       type: 'dashed' // 线的类型，可以是 'solid', 'dashed', 或 'dotted'
    //     }
    //   }
    // }
  ],
  series: [
    {
      name: 'OEE',
      type: 'bar',
      tooltip: {
        valueFormatter: function(value) {
          return value + ' %'
        }
      },
      label: { show: true },
      // symbol: ['none', 'none'], // 去掉标记的箭头
      // label: {
      //   show: true,
      //   position: 'end', // 标签位置
      //   formatter: '{b}:{c}', // 标签格式
      //   color: 'blue' // 标签颜色
      //   // formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
      // },
      // lineStyle: {
      //   color: 'blue', // 线条颜色
      //   type: 'dashed' // 线条类型
      // },
      markLine: {
        symbolSize: 0, // 不展示上下限两边的图标
        data: [
          {
            type: 'average',
            name: '平均值'
          }
        ]
        // symbol: ['none', 'none'], // 去掉标记的箭头
        // label: {
        //   position: 'end', // 标签位置
        //   formatter: '{b}:{c}', // 标签格式
        //   color: 'blue' // 标签颜色
        // }
        // lineStyle: {
        //   color: 'blue', // 线条颜色
        //   type: 'dashed' // 线条类型
        // }
      },
      data: [
        // 100, 140, 230, 100
      ]
    },
    {
      name: '均值',
      type: 'line'
      // yAxisIndex: 1,
      // tooltip: {
      //   valueFormatter: function(value) {
      //     return value + ' %'
      //   }
      // },
      // data: [120, 120, 120, 120]
    }
  ]
}

/**
 * UPH
 */
export const UPH = {
  backgroundColor: 'transparent',
  title: {
    text: 'UPH',
    left: 'center',
    top: '10px',
    textStyle: {
      color: '#6C6C6C',
      fontSize: 20,
      fontWeight: 600,
      align: 'center'
    }
  },
  color: [
    '#5087EC',
    '#61a0a8',
    '#d48265',
    '#91c7ae',
    '#749f83',
    '#ca8622',
    '#bda29a',
    '#6e7074',
    '#546570',
    '#c4ccd3'
  ],
  tooltip,
  grid: {
    backgroundColor: 'transparent',
    top: 60, // 生成的图片和顶部的间距
    bottom: 40,
    left: 60,
    right: 60,
    containLabel: true// 为ture才会生效
  },
  legend: {
    show: true,
    bottom: '3%'
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisPointer: {
        type: 'shadow'
      },
      axisLabel: {
        formatter: '{value}',
        lineStyle: {
          color: 'black'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#090909'
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      splitArea: {
        show: false
      },
      axisLabel: {
        formatter: '{value} %',
        lineStyle: {
          color: 'black'
        }
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#090909'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#ccc',
          type: 'dashed'
        }
      }
    }
    // {
    //   type: 'value',
    //   // name: 'Temperature',
    //   min: 0,
    //   max: 25,
    //   interval: 5,
    //   splitArea: {
    //     show: false
    //   },
    //   axisLabel: {
    //     formatter: '{value} %',
    //     lineStyle: {
    //       color: 'black'
    //     }
    //   },
    //   axisLine: {
    //     show: false,
    //     lineStyle: {
    //       color: '#090909'
    //     }
    //   },
    //   splitLine: {
    //     show: true,
    //     lineStyle: {
    //       color: '#ccc', // 网格线颜色
    //       type: 'dashed' // 线的类型，可以是 'solid', 'dashed', 或 'dotted'
    //     }
    //   }
    // }
  ],
  series: [
    {
      name: 'UPH',
      type: 'bar',
      tooltip: {
        valueFormatter: function(value) {
          return value + ' %'
        }
      },
      label: {
        show: true
        // formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
      },
      markLine: {
        symbolSize: 0, // 不展示上下限两边的图标
        data: [
          {
            type: 'average',
            name: '平均值'
          }
        ]
      },
      data: [
        // 100, 140, 230, 100
      ]
    },
    {
      name: '均值',
      type: 'line'
      // yAxisIndex: 1,
      // tooltip: {
      //   valueFormatter: function(value) {
      //     return value + ' %'
      //   }
      // },
      // data: [120, 120, 120, 120]
    }
  ]
}

